<template>
	<div>

		<el-container>
			<el-aside width="200px">


				<img v-if="newUser.userImage" :src="newUser.userImage" class="avatar"
					style="width: 100pxpx;height: 100px;border-radius: 50%">

			</el-aside>
			<el-main>

				<el-form label-width="100px">
					<el-form-item label="账号">
						<el-input v-model="newUser.userAccount" placeholder="请输入内容" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="用户名">
						<el-input v-model="newUser.userName" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="新密码">
						<el-input type="password"  v-model="newUser.userPassword" placeholder="请输入内容"></el-input>
					</el-form-item>


					<el-form-item label="电话">
						<el-form :inline="true" class="demo-form-inline">
							<el-form-item>
								<el-input v-model="newUser.phone" placeholder="请输入内容" :disabled="true"></el-input>

							</el-form-item>

							<el-form-item>
								<el-button type="primary" round @click="isVisible=true">更换绑定手机</el-button>
							</el-form-item>
						</el-form>
					</el-form-item>




					<el-form-item v-if="isVisible" label="新电话">
						<el-input v-model="newUser.userPhone" placeholder="请输入内容"></el-input>
					</el-form-item>




					<el-form-item label="验证码">
						<el-form :inline="true" class="demo-form-inline">
							<el-form-item>
								<el-input v-model="newUser.code" placeholder="请输入内容"></el-input>

							</el-form-item>

							<el-form-item>

								<el-button type="primary" round @click="VerificationCode()"
									:disabled="sendCode.isDisabled">{{sendCode.buttonName}}</el-button>
							</el-form-item>
						</el-form>
					</el-form-item>


					<el-form-item label="修改头像">
						<el-upload class="upload-demo" ref='upload' action="http://localhost:8080/file/upload"
							:on-success="successUpdateFile" list-type="picture">
							<el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
					</el-form-item>


					<el-form-item>
						<el-button type="primary" round @click="updateUserInfo">修改</el-button>
					</el-form-item>
				</el-form>




			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isVisible: false,
				sendCode: {
					buttonName: "发送短信",
					isDisabled: false,
					sendTime: 60
				},
				newUser: {
					userId: null,
					userAccount: null,
					userPassword: null,
					phone: null,
					userPhone: null,
					userName: null,
					userImage: null,
					code: null,
				}
			}

		},
		methods: {
			updateUserInfo() {
				this.$http.post('/user-table/updateByMyself.do', this.newUser)
					.then(resp => {
						if (resp.data.code == 200) {

							this.$message({
								type: 'success',
								message: '修改成功 '
							});
							//修改成功后退出
							this.$http.get("/logout")

						} else {
							this.$message({
								type: 'error',
								message: '修改失败 ' + resp.data.msg
							});
						}

					})
			},
			loadUserInfo() {
				let json = localStorage.getItem("com.woniu-account");
				let acc = JSON.parse(json)
				this.$http.get("/user-table/findUserById/" + acc.userId).then(resp => {
					if (resp.data.code == 200) {
						this.newUser.userId = resp.data.data.userId;
						this.newUser.userAccount = resp.data.data.userAccount;
						this.newUser.phone = resp.data.data.userPhone;
						this.newUser.userPhone = resp.data.data.userPhone;
						this.newUser.userName = resp.data.data.userName;
						this.newUser.userImage = resp.data.data.userImage;
					}
				})
			},
			VerificationCode() {
				this.$http.post("/pawn-activeCode/captcha.do/" + this.newUser.phone)
					.then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								type: 'success',
								message: '验证码发送成功 '
							});
						} else {
							this.$message({
								type: 'error',
								message: '验证码发送失败 ' + resp.data.msg
							});
						}

					}).catch(function(error) {

					});



				this.sendCode.isDisabled = true;


				let interval = window.setInterval(resp => {

					// console.log(this.sendCode.sendTime)

					this.sendCode.buttonName = '（' + this.sendCode.sendTime + '秒）后重新发送';
					--this.sendCode.sendTime;
					if (this.sendCode.sendTime < 0) {
						this.sendCode.buttonName = "重新发送";
						this.sendCode.sendTime = 10;
						this.sendCode.isDisabled = false;
						window.clearInterval(interval);
					}
				}, 1000);

			},

			successUpdateFile(response, file, fileList) {
				this.newUser.userImage = response.data;
			}
		},
		created() {
			this.loadUserInfo();
		}
	}
</script>

<style scoped>

</style>
